<template>
  <div class="ele-body ele-body-card">
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span>工作台</span>
      </div>
      <div class="el-page-header-content">
        <span
          class="dashboard-workplace-header-avatar el-avatar el-avatar-image"
        >
          <img src="~@/assets/image/head.png" />
        </span>
        <div class="dashboard-workplace-header-tip">
          <p class="dashboard-workplace-header-tip-title">
            {{ welcome() }}， {{ loginUser.username }}，每一天，遇见更好的自己！
          </p>
          <p class="dashboard-workplace-header-tip-desc">
            <i class="el-icon-timer"></i> 上次登录时间:
            <i v-if="loading" class="el-icon-loading"></i
            ><span v-show="!loading">{{ loginTime }}</span>
            <span style="margin-left: 16px"
              ><i class="el-icon-place"></i> 上次登录IP:
              <i v-if="loading" class="el-icon-loading"></i
              ><span
                v-show="!loading"
                :style="{ color: [address == loginIP ? '#808695' : 'red'] }"
                >{{ loginIP }} {{ loginIPName }}</span
              >
            </span>
          </p>
        </div>
      </div>
    </el-card>

    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span>数据概况</span>
      </div>
      <el-row>
        <el-col :span="8">
          <div class="el-card">
            <div class="little-title">今日概况</div>
            <div class="red-transfer">
              <div class="item-inner-big">
                <div class="t">访问</div>
                <div class="zdaypowder">
                  <i v-if="loading" class="el-icon-loading"></i
                  ><span v-show="!loading">
                    <countTo
                      :startVal="startVal"
                      :endVal="dayPv"
                      :duration="4000"
                    ></countTo>
                  </span>
                </div>
              </div>
              <div class="item-inner-big">
                <div class="t">复制数</div>
                <div class="zdayorder">
                  <i v-if="loading" class="el-icon-loading"></i
                  ><span v-show="!loading">
                    <countTo
                      :startVal="startVal"
                      :endVal="dayCopyNum"
                      :duration="4000"
                    ></countTo>
                  </span>
                </div>
              </div>
              <div class="item-inner-big">
                <div class="t">复制成本</div>
                <div class="zdayratio">
                  <i v-if="loading" class="el-icon-loading"></i
                  ><span v-show="!loading">
                    <countTo
                      :startVal="startVal"
                      :endVal="dayCopyCost"
                      :duration="4000"
                    ></countTo>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="el-card">
            <div
              class="little-title"
              style="background-color: #40d4b0; padding: 8px 11px; height: 80px"
            >
              近七天概况
            </div>
            <div class="red-transfer">
              <div class="item-inner-big">
                <div class="t">访问</div>
                <div class="weekspowder">
                  <i v-if="loading" class="el-icon-loading"></i
                  ><span v-show="!loading">
                    <countTo
                      :startVal="startVal"
                      :endVal="weekPv"
                      :duration="4000"
                    ></countTo>
                  </span>
                </div>
              </div>
              <div class="item-inner-big">
                <div class="t">复制数</div>
                <div class="weeksorder">
                  <i v-if="loading" class="el-icon-loading"></i
                  ><span v-show="!loading">
                    <countTo
                      :startVal="startVal"
                      :endVal="weekCopyNum"
                      :duration="4000"
                    ></countTo
                  ></span>
                </div>
              </div>
              <div class="item-inner-big">
                <div class="t">复制成本</div>
                <div class="weeksratio">
                  <i v-if="loading" class="el-icon-loading"></i
                  ><span v-show="!loading">
                    <countTo
                      :startVal="startVal"
                      :endVal="weekCopyCost"
                      :duration="4000"
                    ></countTo
                  ></span>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="el-card">
            <div class="little-title" style="background: rgb(77, 203, 115)">
              本月概况
            </div>
            <div class="red-transfer">
              <div class="item-inner-big">
                <div class="t">访问</div>
                <div class="monthpowder">
                  <i v-if="loading" class="el-icon-loading"></i
                  ><span v-show="!loading">
                    <countTo
                      :startVal="startVal"
                      :endVal="monthPv"
                      :duration="4000"
                    ></countTo
                  ></span>
                </div>
              </div>
              <div class="item-inner-big">
                <div class="t">复制数</div>
                <div class="monthorder">
                  <i v-if="loading" class="el-icon-loading"></i
                  ><span v-show="!loading">
                    <countTo
                      :startVal="startVal"
                      :endVal="monthCopyNum"
                      :duration="4000"
                    ></countTo
                  ></span>
                </div>
              </div>
              <div class="item-inner-big">
                <div class="t">复制成本</div>
                <div class="monthratio">
                  <i v-if="loading" class="el-icon-loading"></i
                  ><span v-show="!loading">
                    <countTo
                      :startVal="startVal"
                      :endVal="monthCopyCost"
                      :duration="4000"
                    ></countTo
                  ></span>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span>数据报表</span>
      </div>
      <div ref="container"></div>
    </el-card>
  </div>
</template>

<script>
import countTo from "vue-count-to";
import { Chart } from "@antv/g2";

export default {
  name: "DashboardWorkplace",
  components: { countTo },
  data() {
    return {
      address: "",
      loginIP: "",
      loginTime: "",
      loginIPName: "",
      startVal: 0,
      dayPv: 0,
      weekPv: 0,
      monthPv: 0,
      dayCopyNum: 0,
      dayCopyCost: 0,
      weekCopyNum: 0,
      weekCopyCost: 0,
      monthCopyNum: 0,
      monthCopyCost: 0,
      loading: true,
      welcome: function () {
        var t = new Date(),
          e = t.getHours();
        return e < 6
          ? "凌晨好"
          : e < 9
          ? "早上好"
          : e < 12
          ? "上午好"
          : e < 14
          ? "中午好"
          : e < 17
          ? "下午好"
          : e < 19
          ? "傍晚好"
          : e < 22
          ? "晚上好"
          : "深夜好";
      },
    };
  },

  mounted() {
    this.getData();
  },
  computed: {
    loginUser() {
      return this.$store.state.user.user;
    },
  },
  methods: {
    getData() {
      this.loading = true;
      this.$http
        .get("/home/getCount")
        .then((res) => {
          this.loading = false;
          if (res.data.code === 0) {
            this.address = res.data.address;
            this.loginIP = res.data.loginIP;
            this.loginTime = res.data.loginTime;
            this.loginIPName = res.data.loginIPName;
            this.dayPv = res.data.dayPv;
            this.weekPv = res.data.weekPv;
            this.monthPv = res.data.monthPv;
            this.dayCopyNum = res.data.dayCopyNum;
            this.dayCopyCost = res.data.dayCopyCost;
            this.weekCopyNum = res.data.weekCopyNum;
            this.weekCopyCost = res.data.weekCopyCost;
            this.monthCopyNum = res.data.monthCopyNum;
            this.monthCopyCost = res.data.monthCopyCost;
            const chartData = res.data.chartData;
            if (this.$refs.container) {
              const formatNumber = (n) => {
                if (n < 10) {
                  return "0" + n;
                }
                return n;
              };
              const formatDate = (d) => {
                return (
                  d.getFullYear() + "-" + formatNumber(d.getMonth() + 1) + "-"
                );
              };
              const chart = new Chart({
                container: this.$refs.container,
                autoFit: true,
                height: 360,
                padding: [30, 20, 70, 30],
              });
              chart.data(chartData);
              chart.tooltip({
                showCrosshairs: true,
                shared: true,
                title: (title) => {
                  return formatDate(new Date()) + title;
                },
              });
              chart.axis("Value", {
                label: {
                  formatter: (val) => {
                    return val;
                  },
                },
              });
              chart.legend({
                position: "top",
              });
              chart.line().position("Date*Value").color("Name").shape("smooth");
              chart
                .point()
                .position("Date*Value")
                .color("Name")
                .shape("circle");
              chart.render();
            }
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((e) => {
          this.loading = false;
          this.$message.error(e.message);
        });
    },
  },
};
</script>

<style scoped>
.el-card-header {
  color: #595959;
}
.el-card-header {
  position: relative;
  height: 42px;
  line-height: 42px;
  padding: 0 15px;
  border-bottom: 1px solid #f6f6f6;
  color: #333;
  border-radius: 2px 2px 0 0;
  font-size: 14px;
}

.el-card-body {
  position: relative;
  padding: 10px 15px;
  line-height: 24px;
}

.console-app-group {
  padding: 15px;
  border-radius: 4px;
  text-align: center;
  background-color: #fff;
  cursor: pointer;
  display: block;
}

.console-app-group .console-app-icon {
  width: 32px;
  height: 32px;
  line-height: 32px;
  margin-bottom: 6px;
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 32px;
  color: #69c0ff;
}

.console-app-group:hover {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
}

.dashboard-workplace-header-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin-right: 15px;
}

.el-avatar {
  display: inline-block;
  text-align: center;
  background: #ccc;
  color: #fff;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  width: 64x;
  height: 64x;
  line-height: 64x;
  border-radius: 50%;
}
.el-avatar-image {
  background: transparent;
}
.dashboard-workplace-header-tip {
  display: inline-block;
  vertical-align: middle;
}
.dashboard-workplace-header-tip-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
}
.dashboard-workplace-header-tip-desc {
  color: #808695;
}
.el-avatar > img {
  width: 100%;
  height: 100%;
}
img {
  border-style: none;
}

.lay-big-font {
  font-size: 28px;
  line-height: 36px;
  padding: 10px 0 10px;
  overflow: hidden;
  white-space: nowrap;
  word-break: break-all;
  text-overflow: ellipsis;
}

.analysis-chart-card-content {
  height: 40px;
  box-sizing: border-box;
  margin-bottom: 12px;
}

.el-triangle-x {
  position: absolute;
  margin-top: 10px;
  margin-left: 5px;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-bottom: 5px solid #52c41a;
}

.el-triangle-y {
  position: absolute;
  margin-top: 10px;
  margin-left: 5px;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-top: 5px solid red;
}

.el-badge,
.el-btn-group,
.el-span-color {
  position: absolute;
  right: 15px;
}

.el-btn-group {
  display: inline-block;
  vertical-align: middle;
  font-size: 0;
}

.little-title {
  display: inline-block;
  vertical-align: top;
  width: 20px;
  height: 64px;
  background: #3aa0ff;
  padding: 16px 11px;
  font-size: 14px;
  font-family: PingFang-SC-Bold;
  font-weight: bold;
  color: white;
  line-height: 16px;
}

.red-transfer {
  display: inline-block;
}

.red-transfer {
  font-size: 14px;
  padding: 23px 0;
}

.item-inner-big {
  display: inline-block;
  width: 120px;
  line-height: 32px;
  text-align: center;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.red-transfer .item-inner-big:last-child {
  border-right: 0px;
}

.item-inner-big .v {
  height: 28px;
  font-size: 22px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  line-height: 29px;
}

.item-inner-big .t {
  height: 20px;
  font-size: 13px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.45);
  line-height: 20px;
}

.el-col-sm4 {
  width: 30%;
}
</style>
